<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>资源统计系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="./css/x-admin.css" media="all">
<link rel="stylesheet" href="lib/css/layui.css" media="all">
<script src="lib/layui/layui.js"></script>
<style type="text/css">
	#tianJ{
		margin-left: 1250px
	}
</style>
</head>
<body>
	<div id="Mose1" style="display: none">
		<form id="Mose" class="layui-form" action="">
			<div class="layui-form-item">
				<div class="layui-inline">
				<input id="id" hidden="" >
					<label class="layui-form-label">阅览室</label>
					<div class="layui-input-inline">
						<input type="text" id="tests" name="ziYuanName" lay-verify="" autocomplete="off"
							class="layui-input">
					</div>
					<button type="submit" id="tianjia" class="layui-btn" lay-submit="" lay-filter="addZYs">立即添加</button>
					<button type="submit" id="xiuG" class="layui-btn" lay-submit="" lay-filter="xiuZYs">立即修改</button>
				</div>
			</div>
		</form>
	</div>
	
	<div>
		<button type="submit" id="tianJ" class="layui-btn" lay-submit="" lay-filter="tianJ"><i class="layui-icon"></i></button>
	</div>
	<table id="demo" lay-filter="test"></table>
	<script>
layui.use(['table','layer','form'], function(){
  var table = layui.table;
  var $=layui.$;
  var layer=layui.layer;
  var form=layui.form;
  //第一个实例
  table.render({
    elem: '#demo'
    ,id:'readRoomTable'
    ,url: 'Read_rm' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: '编号',sort: true, fixed: 'left'}
      ,{field: 'ziYuanName', title: '阅览室'}
       ,{fixed: 'right',title: '操作' , align:'center',width:250, toolbar: '#barDemo'}
    ]]
    
  });
  //添加
  form.on('submit(addZYs)', function(data){
		 $.post("Read_ro",$("#Mose").serialize(),
		 function(res){
			 if(res.code==0){
			 layer.closeAll();
			 	table.reload("readRoomTable");
			 	
			 }	
		 },
		 "json")
		 return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
//修改
  form.on('submit(xiuZYs)', function(data){
		 $.post("Read_ra",$("#Mose").serialize(),
		 function(res){
			 if(res.code==0){
			 	layer.closeAll();
			 	table.reload("readRoomTable");
			 	
			 }	
		 },
		 "json")
		 return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
  form.on('submit(tianJ)',function(data){
   $("#xiuG").hide();
  	$("#tianjia").show();
    		layer.open({
  				type: 1,
  				content: $('#Mose1'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
  				area: ["600px","200px"]
						});
  });
  //工具条事件
table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
 
  if(layEvent === 'detail'){ //添加
 
  } else if(layEvent === 'del'){ //删除
    layer.confirm('真的删除行么', function(index){
    	$.post("Read_oo",{
    		id:data.id
    	},function(res){
    		if(res.code=="0"){
    			layer.msg(res.msg);
    			table.reload("readRoomTable");
    		}
    	},"json")
    });
  } else if(layEvent === 'edit'){ //编辑
  $("#tianjia").hide();
  $("#xiuG").show();
  $("#id").val(data.id);
   $("#tests").val(data.ziYuanName);
  //form.val("#Mose",data);
  layer.open({
  				type: 1,
  				content: $('#Mose1'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
  				area: ["600px","200px"]
			});
  } 
});
  
});
</script>
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
</body>
</html>